<template>
  <view class="container">
    <view class="box">
      <view class="boxone">
        <text class="shop-name">xxx店洗车</text>
        <text class="date">2022-10-10 11:09</text>
      </view>
      <view class="money">
        -50.00
      </view>
    </view>
  </view>
</template>

<script setup>
	
</script>

<style scoped>
.container {
  padding: 20px;
}

.box {
  display: flex;
  justify-content: space-between; /* 左右两侧对齐 */
  align-items: center; /* 垂直居中 */
  padding: 10px; /* 添加内边距，避免内容紧贴边框 */
    border-bottom: 1px solid #eee; /* 底部边框为浅灰色 */
}

.boxone {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 10px; /* 设置元素之间的间距 */
}

.shop-name {
  font-size: 16px;
  color: #333; /* 默认字体颜色 */
}

.date {
  font-size: 12px; /* 日期字体调小 */
  color: #999; /* 浅灰色 */
}

.money {
  font-size: 16px;
  color: #999; /* 浅灰色 */
}
</style>
